<template>
  <div class="goods" >
    <el-button type="warning" class="left" @click="prev">
      &lt; 回到上一页
    </el-button>
    <el-button type="danger" class="right" @click="next">
      查看购物车 &gt;
    </el-button>
    <div class="container">
      <el-card>
        <div class="goods-info">
          <div class="big">
            <div class="large"></div>
          </div>
          <div class="small">
            <img src="../../assets/images/Cdetails-02.png" alt="">
            <img src="../../assets/images/Cdetails-03.png" alt="">
            <img src="../../assets/images/Cdetails-04.png" alt="">
            <img src="../../assets/images/Cdetails-05.png" alt="">
          </div>
          <div class="title">
            <!-- {{product.name}} -->
            C语言程序设计(典藏版)
            <div class="sub">
              <!-- {{product.sub}} -->
              C语言之父&图灵奖得主作品，K&R的TCPL新版典藏版，全球数千万程序员学习C语言的选择。让你从语言设计者的角度理解C语言。
            </div>
            <div class="price">
              <!-- {{product.price}} -->
              <span>￥59.10</span>
              <i class="origin">
                <!-- {{product.origin}} -->
                ￥<del>79.10</del>
              </i>
            </div>
            <div class="card">
              <div class="sale">
                促销 <span>双十二好物放送，领券购买直降20元</span>
              </div>
              <div class="address">
                配送
                <span>
                  至
                  <el-select v-model="value1" class="m-2 sel" placeholder="省份" size="small">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                  <el-select v-model="value2" class="m-2 sel" placeholder="城市" size="small">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                  <el-select v-model="value3" class="m-2 sel" placeholder="地区" size="small">
                    <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </span>
              </div>
              <div class="serve">
                服务 <span>·无忧退款 ·极速支付 ·免费包邮</span> <a href="javascipt:;">了解详情</a>
              </div>
            </div>
            <div class="weight">
              重量 <span>0.49kg</span>
            </div>
            <div class="amount">
              数量
              <div class="slider-demo-block">
                <el-slider v-model="amount" show-input size="small" />
              </div>
            </div>
            <el-button class="btn" type="success">
              加入购物车
            </el-button>
          </div>

        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import router from '@/router'
import { ref, reactive  } from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: 'GoodsPage',
  setup() {
    const route = useRoute()
    const prev = ()=>{
      router.back()
    }

    const next = ()=> {
      router.push('/cart')
    }
    const value1 = ref('')
    const value2 = ref('')
    const value3 = ref('')
    const amount = ref(0)


    const options1 = [
      {
        value: 'Option1',
        label: '湖北省',
      },
      {
        value: 'Option2',
        label: '河北省',
      },
      {
        value: 'Option3',
        label: '湖南省',
      },
      {
        value: 'Option4',
        label: '河南省',
      },
      {
        value: 'Option5',
        label: '云南省',
      },
    ]
    const options2 = [
      {
        value: 'Option1',
        label: '武汉市',
      },
      {
        value: 'Option2',
        label: '保定市',
      },
      {
        value: 'Option3',
        label: '长沙市',
      },
      {
        value: 'Option4',
        label: '平顶山市',
      },
      {
        value: 'Option5',
        label: '西双版纳市',
      },
    ]
    const options3 = [
      {
        value: 'Option1',
        label: '武昌区',
      },
      {
        value: 'Option2',
        label: '江汉区',
      },
      {
        value: 'Option3',
        label: '江岸区',
      },
      {
        value: 'Option4',
        label: '汉阳区',
      },
      {
        value: 'Option5',
        label: '黄陂区',
      },
    ]
    return { prev, next, value1, value2, value3, amount,options1,options2,options3 }
  }
}
</script>

<style scoped lang='less'>
.goods {
      width: 100%;
      height: 800px;
      background-color: transparent;

      .left{
        margin-left: 20px;
        margin-top: 20px;
      }
      .right{
        margin-left: 1000px;
        margin-top: 20px;
      }
      .container{
        width: 100%;
        height: 100%;
        background-color:rgb(red, green, rgb(66, 66, 88));
        .el-card{
          margin: 40px auto !important;
          width: 80%;
          height: 60%;
          .goods-info{
            .big{
              position: relative;
              display: flex;
              z-index: 500;
              .large{
                width: 440px;
                height: 400px;
                position: absolute;
                top: 0;
                left: 10px;
                background-image: url("../../assets/images/Cdetails-01.png");
                background-repeat: no-repeat;
                background-size: contain;
              }
            }
            .small{
              position: absolute;
              top: 25px;
              left: 590px;
              img{
                border: 2px solid #ccc;
                display: block;
                width: 80px;
                height: 80px;
                margin-top: 15px;
              }
            }
            .title{
              position: absolute;
              top: 25px;
              left:710px;
              font-size: 18px;
              width: 420px;
              .sub{
                padding-top: 10px;
                font-size: 12px;
                color:#888;
              }
            }
            .price{
              margin-top: 10px;
              font-size: 12px;
              color: #cfcfcf;
              span{
                color:red;
                font-size: 16px;
              }
            }
            .card{
              display: flex;
              flex-direction: column;
              justify-content: center;
              margin-top: 10px;
              width: 360px;
              height: 100px;
              background-color: #e1d7d788;
              div{
                flex:1;
                font-size: 12px;
                text-indent: 8px;
                line-height: 28px;
                color: #666;
                span{
                  margin-left: 10px;
                }
                a{
                  color:@shopColor;
                }
              }
              .sel{
                width: 80px !important;
              }
            }
            .weight{
              margin-top: 20px;
              font-size: 12px;
              color:#666;
            }
            .amount{
              margin-top: 20px;
              font-size: 12px;
              color: #666;
              .slider-demo-block {
                margin-top: 20px;
                display: flex;
                align-items: center;
              }

                .slider-demo-block .el-slider {
                  margin-top: 0;
                  margin-left: 12px;
                }
            }
            .btn{
              margin: 50px 130px;
            }
          }
        }
      }
    }
</style>
